<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';

// 标签页数据接口
interface TabProps {
  id: string;
  url: string;
  title: string;
  icon?: string;
  loading: boolean;
  canGoBack: boolean;
  canGoForward: boolean;
  isSecure: boolean;
  isolationGroup?: number;
  privateMode?: boolean;
  hasError?: boolean;
  errorDescription?: string;
}

interface Props {
  tabId: string;
  url: string;
  active: boolean;
  isolationGroup?: number;
  privateMode?: boolean;
  windowId: number;
  index: number;
}

const props = defineProps<Props>();
const emit = defineEmits<{
  (e: 'update:tab', tab: Partial<TabProps>): void;
  (e: 'navigate', url: string): void;
  (e: 'contextmenu', data: any): void;
}>();

const isLoading = ref(false);
const title = ref('新标签页');
const currentUrl = ref('');
const favicon = ref('');
const canGoBack = ref(false);
const canGoForward = ref(false);
const hasError = ref(false);
const errorDescription = ref('');

// 监听来自主进程的标签页更新事件
onMounted(() => {
  // 注册标签更新监听器
  const removeUpdateListener = window.elec.tab.onTabUpdated((tabInfo: any) => {
    // 更新标签页状态
    if (tabInfo && String(tabInfo.id) === props.tabId) {
      isLoading.value = tabInfo.isLoading;
      title.value = tabInfo.title;
      currentUrl.value = tabInfo.url;
      favicon.value = tabInfo.favicon || '';
      canGoBack.value = tabInfo.canGoBack;
      canGoForward.value = tabInfo.canGoForward;
      
      // 错误状态处理
      if (tabInfo.hasError) {
        hasError.value = true;
        errorDescription.value = tabInfo.errorDescription || '页面加载失败';
      } else {
        hasError.value = false;
        errorDescription.value = '';
      }
      
      // 通知父组件状态更新
      emit('update:tab', {
        id: props.tabId,
        title: title.value,
        url: currentUrl.value,
        icon: favicon.value,
        loading: isLoading.value,
        canGoBack: canGoBack.value,
        canGoForward: canGoForward.value,
        isSecure: currentUrl.value.startsWith('https://'),
        hasError: hasError.value,
        errorDescription: errorDescription.value
      });
    }
  });
  
  // 在组件卸载时移除监听器
  onBeforeUnmount(() => {
    removeUpdateListener();
  });
});

// 监听URL变化，通知主进程导航到新URL
watch(() => props.url, (newUrl) => {
  if (newUrl && newUrl !== currentUrl.value && window.elec && props.active) {
    navigateTo(newUrl);
  }
});

// 监听active状态变化
watch(() => props.active, (isActive) => {
  if (isActive && props.windowId && window.elec) {
    // 告诉主进程激活此标签
    window.elec.tab.switchTab(props.windowId, props.index);
  }
});

// 导航到指定URL
function navigateTo(url: string) {
  if (props.windowId && window.elec) {
    try {
      window.elec.tab.navigateTo(props.windowId, props.index, url);
    } catch (error) {
      console.error('导航失败:', error);
      // 设置错误状态
      hasError.value = true;
      errorDescription.value = `导航失败: ${error}`;
      
      // 通知父组件错误状态
      emit('update:tab', {
        id: props.tabId,
        hasError: true,
        errorDescription: errorDescription.value
      });
    }
  }
}

// 前进
function goForward() {
  if (props.windowId && window.elec) {
    window.elec.tab.goForward(props.windowId, props.index);
  }
}

// 后退
function goBack() {
  if (props.windowId && window.elec) {
    window.elec.tab.goBack(props.windowId, props.index);
  }
}

// 刷新页面
function refresh() {
  if (props.windowId && window.elec) {
    window.elec.tab.refreshTab(props.windowId, props.index);
  }
}

// 暴露接口
defineExpose({
  goBack,
  goForward,
  refresh,
  navigateTo
});
</script>

<template>
  <div class="browser-webcontents-container" v-show="active">
    <!-- 内容区域由Electron主进程中的WebContentsView控制 -->
    <div v-if="hasError" class="error-container">
      <div class="error-icon">!</div>
      <h2>页面加载出错</h2>
      <p>{{ errorDescription || '无法加载页面，请检查URL或网络连接' }}</p>
      <button @click="refresh" class="retry-button">重试</button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.browser-webcontents-container {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #fff;
  
  :global(html.dark) & {
    background-color: #202124;
  }
}

.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
  text-align: center;
  
  .error-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #f44336;
    color: white;
    font-size: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }
  
  h2 {
    margin: 10px 0;
    color: #333;
    
    :global(html.dark) & {
      color: #e8eaed;
    }
  }
  
  p {
    color: #666;
    max-width: 500px;
    margin-bottom: 20px;
    
    :global(html.dark) & {
      color: #9aa0a6;
    }
  }
  
  .retry-button {
    background-color: #1a73e8;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    
    &:hover {
      background-color: #0c63d4;
    }
  }
}
</style> 